<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div
      :style="{
        height: divHeight
      }"
    ></div>

    <div class="advertising-preview" ref="preview" :style="{ width: clientWidth + 'px', top: isfollow ? '2.875rem' : '' }">
      <template v-if="cloud_shop_open">
        <div class="homeMember" :class="[{hidestyle_cloudMember: amout && datas.scroll_hide_search.value}]">
          <div class="memberimg">
            <img :src="shop_logo" alt="" />
          </div>
          <div class="name">{{shop_name}}</div>
        </div>
      </template>
      <template v-if="datas.show_search.value">
        <div class="weixin-title" :class="[{ hidestyle: amout && datas.scroll_hide_search.value },hidestyle_cloud_shop]" v-if="datas.logo_style.value == 1">
          <div class="weixin-logo-one" v-if="datas.show_logo.value">
            <img :src="datas.logo.value || emptyImage" @click="gotoUrl" />
          </div>
          <div
            class="weixin-sousuo"
            @click="tosearch"
            :class="{ w: datas.choose_search_style.value == 3, center: datas.choose_search_style.value == 2, padding: datas.choose_search_style.value == 3 }"
          >
            <i class="iconfont icon-all_search_2" v-if="datas.choose_search_style.value == 1 || datas.choose_search_style.value == 2"></i>
            <div>{{ datas.search_title.value }}</div>
          </div>
          <span v-if="datas.choose_search_style.value == 3" @click="tosearch" :class="{ borderOne: datas.choose_search_style.value == 3 }" class="block">搜索</span>
        </div>
        <div class="weixin-title" :class="[{ hidestyle: amout && datas.scroll_hide_search.value },hidestyle_cloud_shop]" v-else>
          <span v-if="datas.choose_search_style.value == 3" @click="tosearch" :class="{ borderTwo: datas.choose_search_style.value == 3 }" class="block">搜索</span>
          <div
            class="weixin-sousuo"
            @click="tosearch"
            :class="{ w: datas.choose_search_style.value == 3, center: datas.choose_search_style.value == 2, padding: datas.choose_search_style.value == 3 }"
          >
            <i class="iconfont icon-all_search_2" v-if="datas.choose_search_style.value == 1 || datas.choose_search_style.value == 2"></i>
            <div>{{ datas.search_title.value }}</div>
          </div>
          <div class="weixin-logo-two" v-if="datas.show_logo.value">
            <img :src="datas.logo.value || emptyImage" @click="gotoUrl" />
          </div>
        </div>
      </template>

      <div class="weixin-bd" v-if="datas.title_list.value && datas.title_list.value.length > 0 && !cloud_shop_open">
        <ul
          class="weixin-menu"
          :style="{ fontWeight: datas.title_style.value.includes('1') ? 'bold' : '', fontStyle: datas.title_style.value.includes('2') ? 'italic' : '' }"
          id="weixin-menu"
          :class="{ scroll: true, 'not-pc-style': fun.getPhoneEnv() != 3, 'scrollbar-none': fun.getPhoneEnv() != 3 }"
        >
          <li v-for="(btn, i) in datas.title_list.value" :key="i" class="menu-item" @click="selectedMenu(i, btn)">
            <div class="menu-item-title" v-if="btn.is_minApp == 1" :class="{ current: isChoose == urlParse(btn.h5_link) || page_id == urlParse(btn.h5_link) }">
              <img v-if="datas.choose_style.value == '2'" :src="btn.image || emptyImage" />
              <span>{{ btn.text }}</span>
            </div>
            <div class="menu-item-title" v-if="btn.is_minApp == 2" @click.stop v-html="btn.html"></div>
          </li>
        </ul>
      </div>
      <template v-if="cloud_shop_open">
        <div class="weixin-bd" style="position: relative;" v-if="datas.title_list.value && datas.title_list.value.length > 0">
          <div class="more-menu" :style="{ '--tabs_height': datas.title_height ? datas.title_height.value + 'px' : '30px','--line_color':datas.title_bg_color.value }">
            <div v-if="!overlayShow" class="more-menu_list">
              <div class="more-menu_lis" v-for="(btn, i) in datas.title_list.value" @click="selectedMenu(i, btn)" :key="i" :class="{ current: isChoose == urlParse(btn.h5_link) || page_id == urlParse(btn.h5_link) }">
                <template v-if="btn.is_minApp == 1">
                  <img class="" v-if="datas.choose_style.value == '2'" :src="btn.image || emptyImage" />
                  <div class="tab">{{ btn.text }}</div>
                </template>
                <div class="tab" v-if="btn.is_minApp == 2" @click.stop v-html="btn.html"></div>
              </div>

            </div>
            <template v-else>
              <div style="padding: 10px 12px;font-weight: bold;font-size: 0.94rem;text-align: left;">
                <span>请选择</span>
              </div>
            </template>
          </div>
          <div class="iconBox">
            <i class="iconfont icon-gengduofenlei" v-if="!overlayShow" @click="stopScroll"></i>
            <i class="iconfont icon-icon_up1" v-if="overlayShow" @click="canScroll"></i>
          </div>
        </div>
        <transition name="fade">
          <div v-if="overlayShow" class="allfiexd">
            <div class="allBox">
              <div class="all" :class="{all_select:isChoose == urlParse(item.h5_link) || page_id == urlParse(item.h5_link)}" v-for="(item, index) in datas.title_list.value" @click="selectedMenu(index, item)" :key="item">{{ item.text }}</div>
            </div>
          </div>
        </transition>
        <!-- 新增遮罩层和下拉框 -->
        <transition name="fade">
          <div class="overlay" ref="overlay" v-show="overlayShow" @click="canScroll"></div>
        </transition>
      </template>
    </div>
  </div>
</template>

<script>
import emptyImage from "../../assets/images/new_diy/image.png";

const css = function() {
  const {
    title_height,
    title_size,
    choose_title_color,
    title_bg_color,
    title_color,
    navigate_color,
    preview_color,
    search_color,
    font_color,
    search_height,
    border_style,
    border_color,
    search_border_radius,
    border_radius,
    cloud_shop_bg
  } = this.datas;

  return `
		    .component-${this.id} .weixin-title{
            height: ${search_height.value}px;
            background-color: ${preview_color.value || "#ffffff"};
	      }

	      .component-${this.id} .weixin-sousuo {
	          background-color: ${search_color.value};
	          color: ${font_color.value};
	          border-radius: ${search_border_radius.value}px;
            border: solid  ${border_style.value}px ${border_color.value};
	      }
	      .component-${this.id} .weixin-logo-one img, .component-${this.id} .weixin-logo-two img{
	          border-radius: ${border_radius.value}px;
	      }
        .component-${this.id} .advertising-preview{
          background-color: ${this.overlayShow ? "rgba(0, 0, 0, 0)" : ""}
        }
        .component-${this.id} .advertising-preview .weixin-menu{
            position: relative;
            height: ${title_height.value}px;
            font-size: ${title_size.value}px;
            color: ${title_color.value || "#333333"};
            background-color: ${navigate_color.value || "#ffffff"};
        }
        .component-${this.id} .more-menu ,.component-${this.id} .allfiexd .allBox{
          background-color: ${navigate_color.value || "#ffffff"};
        }
        .component-${this.id} .advertising-preview .weixin-menu .menu-item {
            height: ${title_height.value}px;
            line-height: ${title_height.value}px;
        }
        .component-${this.id} .advertising-preview .weixin-menu .current{
            color: ${choose_title_color.value || "#333333"};
            background-color: ${title_bg_color.value || "#ffffff"};
        }
        .component-${this.id} .more-menu_list .current ,.component-${this.id} .allfiexd .allBox .all_select{
          color: ${choose_title_color.value || "#333333"};
        }
        .component-${this.id} .homeMember{
          background-color: ${cloud_shop_bg?.value?.color || "#f8f8f8"};
          background-image: url(${cloud_shop_bg?.value?.isColor == 2 ? cloud_shop_bg?.value?.image : ""});
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
        }
    `;
};

export default {
  props: ["id", "datas", "isfollow"],
  data() {
    return {
      amout: false,
      selectedMenuIndex: 0,
      clientWidth: "375",
      emptyImage,
      isChoose: "",
      page_id: "",
      overlayShow: false,
      active: 0,
      cloud_shop_open: false,
      cloud_shop:null,
      shop_logo:'',
      shop_name:''
    };
  },

  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    divHeight() {
      let count = 0;
      if (this.datas.show_search.value) {
        // 有搜索框
        count = this.datas.search_height.value + (this.datas.title_list.value && this.datas.title_list.value.length > 0 ? this.datas.title_height.value - 1 : 0);
        if(this.cloud_shop_open){
          count += 50;
        }
        count += "px";
        return count;
      } else {
        // 没有搜索框直接用菜单栏高度
        count = this.datas.title_height.value;
        if(this.cloud_shop_open){
          count += 50;
        }
        count += "px";
        return;
      }
    },
    hidestyle_cloud_shop(){
      if(this.datas.show_search.value && this.cloud_shop_open){
        return 'hidestyle_cloud_shop'
      }
    }
  },
  watch: {
    $route(to, from) {
      this.isChoose = to.path;
      this.page_id = this.fun.getKey("page_id");
    }
  },
  mounted() {
    let yz_basic_info = JSON.parse(window.localStorage.getItem("yz_basic_info"));
    console.log(yz_basic_info,'qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq',this.datas.cloud_shop_bg)
    if(yz_basic_info?.plugin_setting?.cloud_shop){
      this.cloud_shop = yz_basic_info?.plugin_setting?.cloud_shop;
      this.cloud_shop_open = yz_basic_info?.plugin_setting?.cloud_shop?.open_state;
      if(this.cloud_shop_open){
        this.get_shopData();
      }
    }
    this.isChoose = this.$route.path;
    this.page_id = this.fun.getKey("page_id");
    if (this.fun.getPhoneEnv() == 3) {
      this.clientWidth = 375;
    } else {
      this.clientWidth = document.body.clientWidth;
    }
    this.slider();
    this.$nextTick(() => {
      this.initButtons();
    });
    this.checkNavInd();
  },
  deactivated() {
    document.body.style.overflow = "";
  },
  activated() {
    let yz_basic_info = JSON.parse(window.localStorage.getItem("yz_basic_info"));
    console.log(yz_basic_info,'qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq')
    if(yz_basic_info?.plugin_setting?.cloud_shop){
      this.cloud_shop = yz_basic_info?.plugin_setting?.cloud_shop;
      this.cloud_shop_open = yz_basic_info?.plugin_setting?.cloud_shop?.open_state;
      if(this.cloud_shop_open){
        this.get_shopData();
      }
    }
    this.isChoose = this.$route.path;
    this.page_id = this.fun.getKey("page_id");
    if (this.fun.getPhoneEnv() == 3) {
      this.clientWidth = 375;
    } else {
      this.clientWidth = document.body.clientWidth;
    }
    this.slider();
    this.$nextTick(() => {
      this.initButtons();
    });
    this.checkNavInd();
  },
  methods: {
    async get_shopData(){
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.decorate.shopData", {}, "");
      if(result){        this.shop_logo = data.shop_logo;
        this.shop_name = data.shop_name;
      }else{
        this.$toast(msg);
      }
    },
    checkNavInd() {
      let btnArr = this.datas.title_list.value;
      let ind;
      btnArr.forEach((btn, i) => {
        if (this.isChoose == this.urlParse(btn.h5_link) || this.page_id == this.urlParse(btn.h5_link)) {
          ind = i;
          return;
        }
      });
      this.active = ind;
      return ind;
    },
    overlayShow_open() {},
    updateOverlayPosition() {
      this.$nextTick(() => {
        if (this.$refs.preview) {
          const previewHeight = this.$refs.preview.offsetHeight;
          console.log("广告预览的高度:", previewHeight);
          if (this.$refs.overlay) {
            this.$refs.overlay.style.top = previewHeight - 1 + "px";
          }
        }
      });
    },
    stopScroll() {
      document.body.style.overflow = "hidden";
      this.overlayShow = true;
      this.updateOverlayPosition(); // 调用方法更新位置
    },
    canScroll() {
      document.body.style.overflow = "";
      this.overlayShow = false;
    },
    initButtons() {
      for (let j = 0; j < this.datas.title_list.value.length; j++) {
        let script = document.createElement("script");
        script.type = "text/wxtag-template";
        script.text = `<img style="display: ${
          this.datas.choose_style.value == "2" ? "inline-block" : "none"
        };margin: 0 auto;width: 20px; height: 20px; align-self: center; vertical-align: middle; line-height: ${this.datas.title_height.value}px;"  src="${this.datas.title_list.value[j].image ||
          emptyImage}" alt="图标"/><span style="font-size: 14px;margin-left: 5px; display: inline-block; vertical-align: middle;line-height: ${this.datas.title_height.value}px;">${
          this.datas.title_list.value[j].text
        }</span>`;

        this.datas.title_list.value[
          j
        ].html = `<wx-open-launch-weapp username="${this.datas.title_list.value[j].gh_id}" path="${this.datas.title_list.value[j].minApp_link}">${script.outerHTML}</wx-open-launch-weapp>`;
      }
      this.datas.title_list.value.reverse().reverse(); //改变原始数组从而更新数组
    },
    slider() {
      let that = this;
      window.onscroll = function() {
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        top < 90 ? (that.amout = false) : (that.amout = true);
      };
    },
    tosearch() {
      this.$router.push(
        this.fun.getUrl("search", {
          fromHome: 1
        })
      );
    },
    gotoUrl() {
      let _data = (this.datas.notice_link && this.datas.notice_link.value) || {};
      if (Number(_data.is_h5) == 2 && this.fun.isApp()) {
        YDB.MiniWX(_data.gh_id, _data.minApp_link);
        return;
      }
      // if(item.is_minApp == 2 &&  this.fun.isCPS()) {
      //   let json = {
      //     mini_route: item.minApp_link,
      //     mini_id: item.gh_id,
      //   };
      //   if (this.fun.isIosOrAndroid() === "ios") {
      //     miniWXIOS({ body: "miniWXIOS", json: JSON.stringify(json) });
      //   } else {
      //     miniWXAndroid(JSON.stringify(json));
      //   }
      //   return;
      // }
      if (Number(_data.is_h5) == 1 && _data.link) {
        window.location.href = _data.link;
      }
    },
    /**
     * 处理数据
     * @param {String} datas
     * **/
    handle_data(datas) {
      let handleDatas = {};
      Object.keys(datas).map(key => {
        handleDatas[key] = datas[key].value;
      });
      return handleDatas;
    },
    //选中主菜单
    selectedMenu(i, item) {
      this.selectedMenuIndex = i;

      if (item.h5_link && item.h5_link !== window.location.href) {
        window.location.href = this.fun.changeUrlArg(item.h5_link, "mid", this.fun.getKeyByMid());
      }
    },
    urlParse(urls) {
      if (urls != undefined) {
        //http://umeiga.com/addons/yun_shop/?menu#/cart?i=8
        //   url= >   /cart?
        var url = urls.match(/#\/(\S*)\?i=/);
        if (url instanceof Array && url[1] != undefined) {
          let newUrl = "/" + url[1];
          if (this.isChoose == "/newDiy") {
            // 装修页面高亮
            if (this.page_id) {
              return (new RegExp("[?|&]page_id=" + "([^&;]+?)(&|#|;|$)").exec(urls) || [, ""])[1].replace(/\+/g, "%20"); //定义正则表达式
            } else {
              return "-1";
            }
          } else if (url != undefined) {
            // 匹配路由
            if (newUrl == this.isChoose) {
              return newUrl;
            } else {
              return "-1";
            }
          } else {
            return "-1";
          }
        } else {
          // 装修页面高亮
          if (this.isChoose == "/newDiy" && this.page_id) {
            return (new RegExp("[?|&]page_id=" + "([^&;]+?)(&|#|;|$)").exec(urls) || [, ""])[1].replace(/\+/g, "%20"); //定义正则表达式
          } else {
            return "-1";
          }
        }
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

.component-wrapper {
  position: relative;
}

.advertising-preview {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 170;
  width: 100%;
}

.advertising-preview .weixin-bd {
  margin-top: -1px;
}

.advertising-preview .weixin-menu {
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
}

/* 修改滚动条样式 */
.advertising-preview .weixin-menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.advertising-preview .weixin-menu::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

.advertising-preview .weixin-menu::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}

.advertising-preview .weixin-menu::-webkit-scrollbar-thumb:hover {
  background: #29ba9c;
}

.advertising-preview .weixin-menu::-webkit-scrollbar-corner {
  background: rgb(239, 239, 239);
}

.advertising-preview .weixin-menu.not-pc-style::-webkit-scrollbar {
  display: none;
}

/* 一级 */
.advertising-preview .weixin-menu .menu-item {
  flex: 1;
  position: relative;
  line-height: 36px;
  height: 36px;
  text-align: center;

  /* min-width: 25%; */
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;

  .menu-item-title {
    padding: 0 12px;

    /* white-space: nowrap; */

    /* text-overflow: ellipsis; */

    /* overflow: hidden; */

    /* word-break: break-all; */
    text-align: center;

    img {
      width: 20px;
      height: 20px;
      align-self: center;
      display: inline-block;
      vertical-align: middle;
    }
    span {
      margin-left: 5px;
      display: inline-block;
      vertical-align: middle;
    }
    .pos_line::after {
      position: absolute;
      content: "";
      width: 20px;
      bottom: 0;
      left: 50%; /* 移动到 `.span` 的中心 */
      transform: translateX(-50%); /* 向左移动一半的宽度以居中 */
      height: 5px;
      border-radius: 5px;
      margin-left: 0;
      background-color: var(--themeBaseColor);
    }
  }
}

.menu-item-delete {
  position: absolute;
  top: 0;
  right: 3px;
  font-size: 12px;
}

.weixin-title {
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;

  .weixin-logo-one {
    margin-right: 10px;
    box-sizing: border-box;

    /* border: solid 1px #ccc; */
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      height: 30px;
    }
  }

  .weixin-logo-two {
    margin-left: 10px;
    box-sizing: border-box;

    /* border: solid 1px #ccc; */
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      height: 30px;
    }
  }

  .weixin-sousuo {
    width: 80%;
    height: 30px;

    /* background-color: #f3f2f2; */
    position: relative;
    display: flex;
    align-items: center;

    i {
      font-size: 14px;
      display: inline-block;
      margin-right: 10px;
      margin-left: 10px;
    }
  }

  &.hidestyle {
    margin-top: -50px;
  }
}

.block {
  width: 50px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f2f2;
}

.padding {
  padding-left: 10px;
}

.center {
  justify-content: center;
}

.borderOne {
  border-left: solid 1px #ccc;
}

.borderTwo {
  border-right: solid 1px #ccc;
}

.w {
  width: 65% !important;
}

.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

.fix-class {
  position: fixed;
  top: 95px;
  right: 385px;
  width: 80px;
}
.border_b_l {
  border-bottom: 1px solid #f0f0f1;
}
.allfiexd {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.5);
  .allBox {
    width: 100%;
    padding: 1.28rem 0.75rem;
    border-radius: 0rem 0rem 0.94rem 0.94rem;
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;
    .all {
      padding: 0.59rem 0.47rem;
      background: #f5f5f5;
      border-radius: 0.5rem;
      box-sizing: border-box;
      margin-right: 0.63rem;
      font-size: 0.81rem;
      color: #00001c;
      margin-bottom: 0.28rem;
    }
  }
}

.iconBox {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 1rem;
  justify-content: center;
  .icon-gengduofenlei {
    font-size: 0.9rem;
    color: #353535;
  }
  .icon-icon_up1 {
    font-size: 1rem;
    color: #353535;
  }
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
// 云店
.hidestyle_cloud_shop{
  margin-top: -15px;
  transition: all 0.5s;
  border-radius: 0.8rem 0.8rem 0 0;
}
.hidestyle_cloudMember{
  margin-top: -70px;
}
.homeMember {
  padding: 0 0.94rem;
  box-sizing: border-box;
  // display: flex;
  // align-items: center;
  height: 65px;
  padding-top: 10px;
  .memberimg {
    width: 2.13rem;
    height: 2.13rem;
    background: #737373;
    border: 0.09rem solid #ffffff;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .name {
    font-weight: bold;
    font-size: 1.13rem;
    color: #ffffff;
    margin-left: 0.5rem;
  }
}
.more-menu {
  height: var(--tabs_height);

  .more-menu_list {
    display: flex;
    overflow-x: scroll;
    width: 85%;
    .current {
      position: relative;
    }
    .current::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1.13rem;
      height: 0.19rem;
      background: var(--line_color);
      border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
    }
    .more-menu_lis {
      flex-shrink: 0;
      padding: 0 12px;
      line-height: var(--tabs_height);
      display: flex;
      img {
        width: 20px;
        height: 20px;
        align-self: center;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  .more-menu_list::-webkit-scrollbar {
    display: none;
  }
}
</style>
